<template>
    <div class="marketCommissionDetailTable">
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item :to="{ path: '/marketCommissionTable' }">市场佣金</el-breadcrumb-item>
            <el-breadcrumb-item>{{tables[currentTable]}}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button v-for="(item,index) in tables"
                   :type="currentTable === index ? 'primary': ''"
                   :key="index"
                   @click="changeTable(index)">
            {{item}}
        </el-button>
        <h3>{{currentMonth.split('-').join("年")}}月份好生活{{tables[currentTable]}}</h3>
        <div class="mb30">
            受益人姓名：
            <el-input class="w200 mr20" size="mini" placeholder="请输入姓名" v-model="searchName"></el-input>
            <el-button type="primary" size="mini" @click="searchDataByName" id="monitorEnter">查询</el-button>
            <el-button type="primary" size="mini" @click="exportReport">导出</el-button>
        </div>
        <div v-if="currentTable === 0">
            <el-table
                    :data="assignTableData.data"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        align="center"
                        :key="Math.random()"
                        label="序号"
                        width="50">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="devName"
                        :key="Math.random()"
                        label="项目">
                    <template slot-scope="scope">{{scope.row.devName || '——'}}</template>
                </el-table-column>
                <el-table-column
                        align="center"
                        :key="Math.random()"
                        label="市场拓展团队">
                    <el-table-column
                            align="center"
                            v-for="(item,index) in assignTableData.lineStaffs"
                            :key="index"
                            :label="item.label"
                            :prop="item.props">
                        <template slot-scope="scope">{{scope.row[item.props] || '——'}}</template>
                    </el-table-column>
                </el-table-column>
                <el-table-column
                        align="center"
                        :key="Math.random()"
                        label="考核指标完成率">
                    <el-table-column
                            prop="checkTarget"
                            v-if="isShowUpdate"
                            width="120"
                            align="center"
                            label="考核指标">
                        <template slot-scope="scope">
                            <el-input :disabled="isDisabledUpdate" style="width: 75%" v-if="scope.row.devId" v-model="scope.row.checkTarget" @input="replaceField(scope.row.checkTarget, scope.$index, 'checkTarget')" @blur="save(scope.row)" size="mini"></el-input>
                            <span v-else>{{scope.row.checkTarget || "0"}}</span>%
                        </template>
                    </el-table-column>
                    <el-table-column
                            v-if="isShowUpdate"
                            prop="cumulativeCheckTarget"
                            align="center"
                            width="120"
                            :key="Math.random()"
                            label="累计考核指标">
                        <template slot-scope="scope">
                            <el-input :disabled="isDisabledUpdate" style="width: 75%" v-if="scope.row.devId" v-model="scope.row.cumulativeCheckTarget" @input="replaceField(scope.row.cumulativeCheckTarget, scope.$index, 'cumulativeCheckTarget')" @blur="save(scope.row)" size="mini"></el-input>
                            <span v-else>{{scope.row.cumulativeCheckTarget || "0"}}</span>%
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column
                        align="center"
                        :key="Math.random()"
                        label="本月佣金计提数">
                    <el-table-column
                            align="center"
                            v-for="(item,index) in assignTableData.lineCommissions"
                            :key="index"
                            :label="item.label"
                            :prop="item.props">
                    </el-table-column>
                </el-table-column>
                <el-table-column
                        align="center"
                        :key="Math.random()"
                        label="实际发放佣金">
                    <el-table-column
                            align="center"
                            v-for="(item,index) in assignTableData.lineShouldCommissions"
                            :key="index"
                            :label="item.label"
                            :prop="item.props">
                    </el-table-column>
                </el-table-column>
            </el-table>
            <div class="pagebar">
                <el-pagination
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :current-page.sync="tableConfig.pageNum"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="tableConfig.pageSize"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :total="tableConfig.totalSize">
                </el-pagination>
            </div>
        </div>
        <div v-else-if="currentTable === 1">
            <el-table
                    :data="grantTableData1"
                    border
                    :span-method="objectSpanMethod"
                    style="width: 100%">
                <el-table-column
                        align="center"
                        prop="serialNum"
                        :key="Math.random()"
                        label="序号"
                        width="50">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="regionName"
                        :key="Math.random()"
                        label="区域">
                    <template slot-scope="scope">{{scope.row.regionName || "——"}}</template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="staffName"
                        :key="Math.random()"
                        label="受益人姓名">
                    <template slot-scope="scope">{{scope.row.staffName || "——"}}</template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="departmentName"
                        :key="Math.random()"
                        label="部门">
                    <template slot-scope="scope">{{scope.row.departmentName || "——"}}</template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="stationName"
                        :key="Math.random()"
                        label="工作岗位">
                    <template slot-scope="scope">{{scope.row.stationName || "——"}}</template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="totalCommission"
                        :key="Math.random()"
                        label="市场佣金金额(元)">
                    <template slot-scope="scope">{{scope.row.totalCommission || "——"}}</template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="roleProportion"
                        :key="Math.random()"
                        label="分配比例">
                    <template slot-scope="scope">{{scope.row.roleProportion ? (scope.row.roleProportion + '%') :
                        "——"}}
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        :key="Math.random()"
                        prop="standardCommission"
                        label="岗位标准佣金(元)">
                </el-table-column>
                <el-table-column
                        v-if="isShowUpdate"
                        align="center"
                        :key="Math.random()"
                        prop="specialWeight"
                        label="特殊因素权重调整">
                    <template slot-scope="scope">
                        <el-input :disabled="isDisabledUpdate" v-if="scope.row.id" v-model="scope.row.specialWeight" @input="replaceField(scope.row.specialWeight, scope.$index, 'specialWeight')" @blur="save(scope.row)" size="mini"></el-input>
                        <span v-else>——</span>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="commission"
                        :key="Math.random()"
                        label="岗位佣金(元)">
                </el-table-column>
                <el-table-column
                        align="center"
                        :key="Math.random()"
                        prop="monthCommission"
                        label="本月发放佣金(元)">
                </el-table-column>
                <el-table-column
                        align="center"
                        :key="Math.random()"
                        prop="yearCommission"
                        label="年底预留佣金(元)">
                </el-table-column>
            </el-table>
            <div class="mt20 view-more" @click="getGrantTableList(null)" v-if="grantTableData1.length && viewMore">
                查看更多<i class="el-icon-arrow-down"></i>
            </div>
        </div>
        <div v-else-if="currentTable === 2">
            <el-table
                    :data="grantTableData2"
                    border
                    :span-method="objectSpanMethod"
                    style="width: 100%">
                <el-table-column
                        align="center"
                        prop="serialNum"
                        :key="Math.random()"
                        label="序号"
                        width="50">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="departmentName"
                        :key="Math.random()"
                        label="部门">
                    <template slot-scope="scope">{{scope.row.departmentName || "——"}}</template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="staffName"
                        :key="Math.random()"
                        label="受益人姓名">
                    <template slot-scope="scope">{{scope.row.staffName || "——"}}</template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="stationName"
                        :key="Math.random()"
                        label="工作岗位">
                    <template slot-scope="scope">{{scope.row.stationName || "——"}}</template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="deptProportion"
                        :key="Math.random()"
                        label="部门比例(%)">
                    <template slot-scope="scope">{{scope.row.deptProportion ? (scope.row.deptProportion + '%') :
                        "——"}}
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        :key="Math.random()"
                        prop="deptCommission"
                        label="部门分配佣金金额(元)">
                    <template slot-scope="scope">{{scope.row.deptCommission || "——"}}</template>
                </el-table-column>
                <el-table-column
                        align="center"
                        :key="Math.random()"
                        prop="stationStandardProportion"
                        label="岗位标准权重">
                    <template slot-scope="scope">{{scope.row.stationStandardProportion || "——"}}</template>
                </el-table-column>
                <el-table-column
                        align="center"
                        :key="Math.random()"
                        prop="dynamicProportion"
                        v-if="isShowUpdate"
                        label="岗位工作量权重浮动">
                    <template slot-scope="scope">
                        <el-input :disabled="isDisabledUpdate" v-if="scope.row.id" v-model="scope.row.dynamicProportion" @input="replaceField(scope.row.dynamicProportion, scope.$index, 'dynamicProportion')" @blur="save(scope.row)" size="mini"></el-input>
                        <span v-else>——</span>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        :key="Math.random()"
                        prop="specialProportion"
                        v-if="isShowUpdate"
                        label="特殊原因权重调整">
                    <template slot-scope="scope">
                        <el-input :disabled="isDisabledUpdate" v-if="scope.row.id" v-model="scope.row.specialProportion" @input="replaceField(scope.row.specialProportion, scope.$index, 'specialProportion')" @blur="save(scope.row)" size="mini"></el-input>
                        <span v-else>——</span>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        :key="Math.random()"
                        prop="synthesizeProportion"
                        label="岗位综合权重">
                </el-table-column>
                <el-table-column
                        align="center"
                        :key="Math.random()"
                        prop="stationCommission"
                        label="岗位营收业绩佣金(元)">
                </el-table-column>
            </el-table>
            <div class="mt20 view-more" @click="getGrantTableList(null)" v-if="grantTableData2.length && viewMore">
                查看更多<i class="el-icon-arrow-down"></i>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import api from '@/api/apiPath'

    export default {
        name: 'marketCommissionDetailTable',
        data() {
            return {
                tableConfig: {
                    pageNum: 1,
                    pageSize: 10,
                    totalSize: 10
                },
                tables: [
                    '市场佣金分配明细表',
                    '市场佣金发放明细表',
                    '公佣部分发放明细表',
                ],
                tableName: "",
                currentTable: 0,
                currentMonth: "",
                assignTableData: {
                    data: [],
                    lineShouldCommissions: [],
                    lineCommissions: [],
                    lineStaffs: [],
                },
                searchName: "",
                viewMore: true,
                grantTableData1: [],
                grantTableData2: [],
                grantTableData3: [],
                dialogVisible: false,

                dialogData1: [],   // 1, 3
                dialogData2: [],    // 2
                isShowUpdate: false,
                isDisabledUpdate: true,
                settlementFlag: true  // 是否已结算 
            }
        },
        created() {
            this.currentMonth = this.$route.query.month;
            this.currentTable = +this.$route.query.index;
            this.settlementFlag = this.$route.query.settlementFlag === 0 ? false : true;
            this.getIsUpdateTable();
            this.searchDataByName();
        },
        mounted() {

        },
        methods: {
            changeTable(index) {
                this.currentTable = index;
                this.searchName = "";
                if (this.currentTable === 0) {
                    this.getAssignTableList();
                } else {
                    this.getGrantTableList(2)
                }
            },
            searchDataByName() {
                if (this.currentTable === 0) {
                    this.getAssignTableList();
                } else {
                    this.getGrantTableList(2)
                }
            },
            // 分配表
            getAssignTableList() {
                this.axios.post(api.marketCommissionDetailTable0, {
                    "month": this.currentMonth,
                    "searchName": this.searchName,
                    "pageNum": this.tableConfig.pageNum,
                    "pageSize": this.tableConfig.pageSize
                }).then((res) => {

                    if (res.data.data.total) {
                        console.log(res.data.data);
                        this.assignTableData = res.data.data;
                    } else {
                        this.assignTableData = {
                            data: [],
                            lineShouldCommissions: [],
                            lineCommissions: [],
                            lineStaffs: [],
                        }
                    }
                    this.tableConfig.totalSize = res.data.data.total;
                })
            },
            // 发放表
            getGrantTableList(number) {
                this.viewMore = !!number;
                let apiUrl = api['marketCommissionDetailTable' + this.currentTable]
                this.axios.post(apiUrl, {
                    "month": this.currentMonth,
                    "regionNum": number,
                    "searchName": this.searchName
                }).then((res) => {
                    this['grantTableData' + this.currentTable] = res.data.data;
                    console.log(this['grantTableData' + this.currentTable]);
                })
            },
            objectSpanMethod({row, column, rowIndex, columnIndex}) {
                if (row.mergeField && row.mergeField.indexOf(column.property) >= 0) {
                    if (row.mergeColumn && row.mergeColumn[column.property] > 0) {
                        return {
                            rowspan: row.mergeColumn[column.property],
                            colspan: 1
                        };
                    } else {
                        return {
                            rowspan: 0,
                            colspan: 0
                        };
                    }
                }
            },
            save(data) {

                let currentData = JSON.parse(JSON.stringify(data))
                let params = {};
                if (this.currentTable === 0) {
                    if (!currentData.checkTarget || !currentData.cumulativeCheckTarget) {



                        if (currentData.checkTarget !== 0 && currentData.cumulativeCheckTarget !== 0) {
                            this.$message({
                                message: '考核标准和累计考核标准必须同时设置才能保存！',
                                type: 'warning'
                            });
                            return false;
                        }
                        if (currentData.checkTarget === "" || currentData.checkTarget === null || currentData.cumulativeCheckTarget === "" || currentData.cumulativeCheckTarget === null) {
                            this.$message({
                                message: '考核标准和累计考核标准必须同时设置才能保存！',
                                type: 'warning'
                            });
                            return false;
                        }
                    }
                    params = {
                        month: this.currentMonth,
                        devId: currentData.devId,
                        checkTarget: currentData.checkTarget,
                        cumulativeCheckTarget: currentData.cumulativeCheckTarget,
                    }
                } else if (this.currentTable === 1) {
                    if (+currentData.specialWeight > 1 || +currentData.specialWeight < 0) {
                        this.$message({
                            message: '特殊权重调整应该大于等于0，小于等于1!',
                            type: 'warning'
                        });
                        return false;
                    }
                    params = {
                        id: currentData.id,
                        specialWeight: currentData.specialWeight
                    }
                } else if (this.currentTable === 2) {
                    params = {
                        id: currentData.id,
                        specialProportion: currentData.specialProportion,
                        dynamicProportion: currentData.dynamicProportion
                    }
                }

                this.axios.post(api['marketCommissionDetailTableUpdate' + this.currentTable], params).then((res) => {
                    if (res.data.code === 200) {
                        this.dialogVisible = false;
                        this.$message({
                            message: '调整成功',
                            type: 'success'
                        });
                    }
                    this.searchDataByName();
                }).catch(() => {
                    this.searchDataByName();
                })
            },
            exportReport() {
                this.axios.post(api['marketCommissionDetailTableReport' + this.currentTable], {
                    month: this.currentMonth
                }).then((res) => {
                    console.log(res);
                    if (res.data.code === 200) {
                        this.$message({
                            message: '已导出，请前往报表查询下载',
                            type: 'success'
                        });
                    }
                })
            },
            handleSizeChange(size) {
                this.tableConfig.pageSize = size
                this.getAssignTableList()
            },
            handleCurrentChange(page) {
                this.tableConfig.pageNum = page
                this.getAssignTableList()
            },
            getIsUpdateTable() {
                this.axios.post(api.getIsUpdateTable, {
                    month: this.currentMonth
                }).then((res) => {
                    this.isShowUpdate = !!res.data.data.showFlag;
                    if(!this.settlementFlag) {
                        this.isDisabledUpdate = !res.data.data.canAdjust
                    }else {
                        this.isDisabledUpdate = false;
                    }
                    
                })
            },
            replaceNum(value) {
                value = value.replace(/[^\d.]/g, '');
                value = value.replace(/\.{2,}/g, ".");
                value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
                value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
                if (value.indexOf('.') < 0 && value != '') {
                    value = parseInt(value);
                }
                return value
            },
            replaceField(value, index, field) {
                value = this.replaceNum(value);
                setTimeout(() => {
                    if (this.currentTable === 0) {
                        this.$set(this.assignTableData.data[index], field, value)
                    } else {
                        this.$set(this['grantTableData' + this.currentTable][index], field, value)
                    }
                }, 30)
            },
        },
        components: {},
        computed: {},
        filters: {
            addPercent(value) {
                if (value !== null) {
                    return value + "%"
                } else {
                    return value
                }
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
    .view-more {
        text-align: center;
        color: #3a8ee6;
        cursor: pointer;
    }
</style>
